import React, { PureComponent, Fragment } from "react";
import DataSet from "@antv/data-set";
import {
  Chart,
  Geom,
  Axis,
  Tooltip,
  Legend,
  Coord,
  Guide,
  Line,
  Label
} from "bizcharts";
import ChartLine from "./ChartLine";
import Stackedcolumn from "./Stackedcolumn";
import Donut from "./Donut";
import Accumulate from "./Accumulate";

const scale = {
  line: {
    dataTime: {
      type: "time",
      tickCount: 15,
      mask: "MM-DD",
      //   ticks: array, // 用于指定坐标轴上刻度点的文本信息，当用户设置了 ticks 就会按照 ticks 的个数和文本来显示
      range: [0.03, 0.97]
    }
  },
  stackedcolumn: {
    dataTime: {
      type: "time",
      tickCount: 15,
      mask: "MM-DD",
      range: [0.03, 0.97]
    }
  },
  donut: {
    percent: {
      formatter: val => {
        val = `${(val * 100).toFixed(2)}%`;
        return val;
      }
    }
  },
  accumulate: {
    dataTime: {
      type: "time",
      tickCount: 15,
      mask: "MM-DD",
      range: [0.03, 0.97]
    }
  }
};

const transFormData = (data, chartType) => {
  const dvData = new DataSet.View().source(data);
  switch (chartType) {
    case "donut":
      dvData
        .transform({
          type: "aggregate", // 别名summary
          fields: ["value"], // 统计字段集
          operations: ["sum"], // 统计操作集
          as: ["value"], // 存储字段集
          groupBy: ["$network_type"] // 分组字段集
        })
        .transform({
          type: "percent",
          field: "value",
          dimension: "$network_type",
          as: "percent"
        });
      return dvData;
    case "accumulate": {
      dvData.transform({
        type: "partition",
        groupBy: ["$network_type"], // 以year字段进行分组
        orderBy: ["dataTime"] // 以month字段进行排序
      });
      const keys = Object.keys(dvData.rows);
      const newRows = keys.map(key => {
        const $row = dvData.rows[key];
        return $row.map((item, index) => {
          const beforeRowVal = $row[index - 1] ? $row[index - 1].value : 0;
          item.value = beforeRowVal + item.value;
          return item;
        });
      });
      dvData.rows = [].concat(...newRows);
      return dvData;
    }
    default:
      return dvData;
  }
};

class StandardChart extends PureComponent {
  constructor(props) {
    super(props);
  }

  render() {
    const { chartType, data } = this.props;
    const RenderChart = () => {
      switch (chartType) {
        case "line":
          return <ChartLine></ChartLine>;
        case "stackedcolumn":
          return <Stackedcolumn></Stackedcolumn>;
        case "donut":
          return <Donut></Donut>;
        case "accumulate":
          return <Accumulate></Accumulate>;
        default:
          return <ChartLine></ChartLine>;
      }
    };
    let chartIns;
    return (
      <Chart
        onGetG2Instance={g2Chart => {
          chartIns = g2Chart;
        }}
        placeholder
        height={400}
        data={transFormData(data, chartType)}
        padding="auto"
        forceFit //自适应开关
        scale={scale[chartType]} //数据比例尺
        // onPlotMove={ev => {
        //   var point = {
        //     x: ev.x,
        //     y: ev.y
        //   };
        //   var items = chartIns.getTooltipItems(point);
        //   console.log(items);
        // }}
        // background={{//设置图表整体的边框和背景样式，是一个对象，包含如下属性：
        //   fill: '#f00',
        //   fillOpacity: 0.8,
        //   stroke: '#000',
        //   strokeOpacity: 0.5,
        //   opacity: 0.5,
        //   lineWidth: 7,
        //   radius: 10,
        // }}
        // plotBackground={{//图表绘图区域的边框和背景样式，是一个对象，包含如下属性：
        //   fill: '#00a8e9',
        //   fillOpacity: 0.8,
        //   stroke: '#000',
        //   strokeOpacity: 0.5,
        //   opacity: 0.5,
        //   lineWidth: 7,
        //   radius: 10,
        // }}
        // filter={[['value', val => val > 0]]}
        // onGetG2Instance={g2Chart => {
        //   g2Chart.animate(false);
        //   console.log(g2Chart);
        // }}
        // onTooltipChange={ev => {
        //   const { items } = ev; // tooltip显示的项
        //   const origin = items[0]; // 将一条数据改成多条数据

        //   const { $network_type = '' } = origin.point._origin;
        //   console.log($network_type, items, origin.point._origin);
        //   items.splice(0); // 清空
        //   items.push({
        //     name: '开始值',
        //     title: origin.title,
        //     marker: true,
        //     color: origin.color,
        //     value: $network_type.charAt(0),
        //   });
        //   items.push({
        //     name: '结束值',
        //     marker: true,
        //     title: origin.title,
        //     color: origin.color,
        //     value: $network_type.charAt(1),
        //   });
        // }}
        // onLineClick={event => {
        //   console.log(event);
        // }}
      >
        <Tooltip
          crosshairs={{
            type: "y"
          }}
        />
        {RenderChart()}
      </Chart>
    );
  }
}

export default StandardChart;
